<template>
	<view class="selectModeBox">
		<view class="selectModeBoxBg">
			<view class="content-back">
				<view class="d-title">
					选择难度
				</view>
				<view class="d-title-en">
					Select Difficulty
				</view>
				<view class="closeDialog" @click="fnColse">
					<image class="img" src="@/static/image/fjj/close.png"></image>
				</view>
			</view>
			<view style="display: flex;flex-direction: column;align-items: center; justify-content: center;">
				<view class="menu-item-back" v-for="(item, index) in showPopMenuData" :key="index">
					<view class="menu-item" :data-index="index" @click="itemClicked">
						<view class="menu-name">
							{{item.name}}
						</view>
						<view class="menu-eng">
							{{item.en_name}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<!-- 界面使用 -->
<!-- 		<uv-popup ref="popDif" mode="center" custom-style="height: 200rpx;"
			customStyle="background: transparent;width: 80%;">
			<selectDifficulty @closePopView="fnColse" @showPopMenuData="popMenuData" @selectDif="selectDif">
			</selectDifficulty>
		</uv-popup> -->
<script>
	export default {
		props: {
			showPopMenuData: {
				type: Array
			}
		},
		data() {
			return {
				selectGroup: null,
			}
		},
		mounted() {},
		methods: {
			fnColse() {
				this.$emit('closePopView');
			},
			itemClicked(value) {
				var selectIndex = value.currentTarget.dataset.index;
				this.selectGroup = selectIndex;
				this.$emit('selectDif', {
					'group': this.selectGroup,
				});
			}
		}
	}
</script>

<style lang="less">
	.selectModeBox {
		background: linear-gradient(to bottom, #373632 0%, #130e00 100%);
		border-radius: 20px;

		.selectModeBoxBg {
			background: url(../../static/image/homePage/diwen.png);
			display: flex;
			flex-direction: column;
			background-size: cover;
			background-repeat: no-repeat;
			width: 100%;
			height: 100%;

			.content-back {
				display: flex;
				height: 80px;
				position: relative;
				justify-content: center;
				align-items: center;
				flex-direction: column;

				.d-title {
					font-family: hzgb;
					font-size: 16px;
					color: #fff;
					margin-bottom: 8px;
				}

				.d-title-en {
					font-family: hzgb;
					font-size: 10px;
					color: #fff;
				}

				.closeDialog {
					right: 0px;
					top: 0px;
					position: absolute;
					width: 50px;
					height: 50px;

					.img {
						width: 24px;
						height: 24px;
						margin-top: 20px;
						margin-right: 8px;
					}
				}
			}
		}
	}

	.menu-item-back {
		width: 60%;
		height: 50px;
		margin-bottom: 10px;
		border-radius: 10px;
		background: var(--themeButtonTopBack);
		display: flex;
		padding: 2px;
		align-items: center;
		justify-content: center;

		.menu-item {
			width: 100%;
			height: 100%;
			background: var(--themeBlackTopBack);
			border-radius: 10px;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			color: white;
			font-family: 'hzgb';

			.menu-name {
				width: 100%;
				text-align: center;
				font-size: 18px;
			}

			.menu-eng {
				width: 100%;
				margin-top: 3px;
				text-align: center;
				font-size: 10px;
			}
		}
	}
</style>